<template>
	<view class="user-info">
		<u-form class="form" :model="model" :rules="rules" ref="uForm">
			<u-form-item label="头像" prop="avatar" borderBottom label-width="60">
				<u-avatar class="avatar" size="50" mode="aspectFill" :src="model.avatar" @click="chooseAvatar"></u-avatar>
			</u-form-item>
			<u-form-item label="昵称" prop="nickName" borderBottom label-width="60">
				<u-input placeholder="请输入昵称" border="none" v-model="model.nickName" type="text"></u-input>
			</u-form-item>
			<u-form-item label="用户名" prop="userName" borderBottom label-width="60">
				<u-input placeholder="请输入用户名" border="none" v-model="model.userName" type="text"></u-input>
			</u-form-item>
			<u-form-item label="手机" prop="phone" borderBottom label-width="60">
				<u-input placeholder="请输入手机号码" border="none" v-model="model.phone" type="text" maxlength="11"></u-input>
			</u-form-item>
			<u-form-item label="邮箱" prop="email" borderBottom label-width="60">
				<u-input placeholder="请输入电子邮箱" border="none" v-model="model.email" type="text"></u-input>
			</u-form-item>
			<u-form-item label="性别" prop="sex" @click="showSex = true" label-width="60">
				<u--input v-model="model.sex" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
		</u-form>
		<u-gap height="40" bgColor="#fff"></u-gap>
		<view class="form-footer">
			<u-button class="btn" type="info" @click="cancel" text="取消"></u-button><view style="width: 30%;"></view>
			<u-button class="btn" type="primary" @click="submit" text="提交"></u-button>
		</view>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
	</view>
</template>
<script>
	import config from "@/common/config.js";
	export default {
		data() {
			return {
				image: '',
				showSex: false,
				model: {
					avatar: '',
					nickName: '',
					userName: '',
					phone: '',
					email: '',
					sex: ''
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					}
				],
				rules: {
					nickName: [{
							required: true,
							message: '请输入昵称',
							trigger: 'blur',
						},
						{
							min: 2,
							max: 32,
							message: '昵称长度在 2 到 32 个字符',
							trigger: ['change', 'blur'],
						}
					],
					userName: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur',
						},
						{
							min: 2,
							max: 32,
							message: '姓名长度在 2 到 32 个字符',
							trigger: ['change', 'blur'],
						}
					],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change','blur']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change','blur']
						}
					],
					sex: [{
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					}]
				}
			};
		},
		onLoad() {
			this.getUserinfo()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			chooseAvatar() {
				let temp = this
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					crop: {
						height: 50,
						width: 50
					},
					resize: false,
					success: (chooseImageRes) => {
						const tempFiles = chooseImageRes.tempFiles;
						uni.uploadFile({
							url: config.baseUrl + '/smart/mini/file/upload',
							filePath: tempFiles[0].tempFilePath,
							name: 'file',
							success: (res) => {
								let result = JSON.parse(res.data)
								temp.model.avatar = result.data.url
							}
						});
					}
				});
			},
			getUserinfo() {
				this.$u.api.mine.userinfo({}).then((res) => {
					if(res.code === 0){
						this.model.avatar = res.data.avatar
						this.model.userName = res.data.userName
						this.model.nickName = res.data.nickName
						this.model.phone = res.data.phone
						this.model.email = res.data.email
						this.model.sex = res.data.sex
					}
				});
			},
			sexSelect(e) {
				this.model.sex = e.name
				this.$refs.uForm.validateField('sex')
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					//更新用户信息
					this.$u.api.mine.updateUserInfo(this.model).then(res => {
						let temp = this
						uni.showModal({
							title: '提示',
							content: '更新用户信息成功,请重新登录',
							showCancel: false,
							success: function() {
								temp.$u.api.mine.logout().then(res => {
									//清空存储信息
									// temp.$u.vuex('vuex_token', '')
									// temp.$u.vuex('vuex_user', '')
									uni.clearStorageSync('token')
									uni.clearStorageSync('user_info')
					
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/sys/login/index'
										});
									}, 500);
					
								});
							}
						});
					})
				});
			},
			cancel() {
				uni.navigateBack();
			}
		}
	};
</script>
<style lang="scss" scoped>
	.user-info {
		margin: 30rpx 30rpx 30rpx 30rpx;
	}
	
	.form {
		margin-bottom: 50rpx;
	}
	
	.form-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>